<template>
	<!-- 个人资料 -->
    <div class="roles">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "设置"},{"name": "角色管理", "url": "/roles"}]'></tz-breadcrumb>
      <!-- 数据表单 -->
<div style="margin: 20px;"></div>
<el-card class="box-card">
  <div class="text item">
    <el-tabs value="roleslist" @tab-click="addRoles">
    <el-tab-pane label="角色组" name="roleslist">
      <el-table v-loading="loading" :data="rolesList" style="width: 100%" cell-class-name='text-center' >
        <el-table-column prop="name" label="角色名" >
        </el-table-column>
        <el-table-column label="是否是管理员" >
          <template slot-scope="scope">
              {{scope.$index == 0 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
              <el-button type="primary" v-show ="scope.$index !== 0"  plain size="small" @click="editRoles(scope.row.id)">编辑</el-button>
              <el-button type="primary" v-show ="scope.$index !== 0"  plain size="small" @click="rolesDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
    </el-tab-pane>

    <el-tab-pane label="添加角色" name="addroles" >
       <!-- 添加角色 -->
        <el-form  class="" label-width="100px">
               <el-row>
                 <el-col :span="11">
                  <el-form-item label="角色名称">
                    <el-input class="form-input" v-model="addRolesName"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
              
               <el-row>
                  <el-col :span="11">
                  <div class="rights-border">
                    <div class="rights-title text-left">菜单</div>
                    <el-checkbox v-model="checkedMenu" label="全选" @change = 'checkedMenuClick("checkedMenu")'></el-checkbox>
                    <el-tree
                      :data="menuList"
                      show-checkbox
                      node-key="id"
                      ref="tree1"
                      default-expand-all
                      :expand-on-click-node="false"
                      :props="defaultProps1"
                      >
                    </el-tree>
                  </div>
                  </el-col>
                  <el-col :span="2" ><span class="center-distance">11</span></el-col>
                  <el-col :span="11">
                    <div class="rights-border">
                      <div class="rights-title text-left">权限</div>
                      <el-checkbox v-model="checkedRight" label="全选" @change = 'checkedMenuClick("checkedRight")'></el-checkbox>
                      <el-tree
                        :data="rightsList"
                        show-checkbox
                        node-key="id"
                        ref="tree2"
                        :props="defaultProps2">
                      </el-tree>
                    </div>
                  </el-col>
                </el-row>
              
            
              <el-button type="primary" @click="onSubmit" v-loading.fullscreen.lock="fullscreenLoading1">提交</el-button>
            
        </el-form>
    </el-tab-pane>
    <!-- <el-tab-pane label="修改密码" name="editpass">
      <el-form :label-position="labelPosition" class="" label-width="200px">
        <el-form-item label="旧密码">
          <el-input class="form-input" ></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input  class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input  class="form-input"></el-input>
        </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="onSubmit">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane> -->
  </el-tabs>
  </div>
</el-card>

    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 添加角色点击事件
    addRoles (tab, event) {
      // console.log(tab, event);
      console.log(tab.label);
      if (tab.label === '添加角色') {
        this.getMenuList();
        this.getRightList();
      }
      // console.log(9696);
    },
    // 商户设置
    AddWithdraw (id) {
      this.$router.push({
        path: '/AddWithdraw',
        query: {
          id: id
        }
      });
    },
    // 角色权限编辑点击跳转
    editRoles (id) {
      console.log(id);
      this.$router.push({
        path: '/rolerightseditor',
        query: {
          id: id
        }
      });
    },
    // 全选点击事件
    checkedMenuClick (selectAll) {
      // 全选操作方法
      console.log(this[selectAll]);
      if (this.checkedMenu === true) {
        // 点击全选实现全选操作
        var selectAllMenuList = this.menuList.map(function (v) { return v.id; });
        this.$refs.tree1.setCheckedKeys(selectAllMenuList);
      } else {
        // 否则清空
        this.$refs.tree1.setCheckedKeys([]);
      }
      if (this.checkedRight === true) {
        // 点击全选实现全选操作
        var selectAllrightsList = this.rightsList.map(function (v) { return v.id; });
        this.$refs.tree2.setCheckedKeys(selectAllrightsList);
      } else {
        // 否则清空
        this.$refs.tree2.setCheckedKeys([]);
      }
    },
    // 删除按钮
    rolesDelete (id) {
      console.log(id);
      this.$prompt('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入密码',
        inputType: 'password'
        // 验证新密码字母、数字、特殊符号（必须包含其中两个
        // inputPattern: /^(((?=.*[0-9])(?=.*[a-zA-Z])|(?=.*[0-9])(?=.*[^\s0-9a-zA-Z])|(?=.*[a-zA-Z])(?=.*[^\s0-9a-zA-Z]))[^\s]+)$/,
        // inputErrorMessage: '密码格式不正确'
      }).then(({ value }) => {
        // this.$message({
        //   type: 'success',
        //   message: '你的密码是: ' + value
        // });
        var that = this;
        if (value === '' || value === null) {
          that.$message.error('密码不能为空');
          return false;
        }
        // 删除角色后台请求
        http.get(api.RoleDel, {
          token: that.token,
          id: id,
          Pass: value
        }, (res) => {
          console.log(res);
          console.log(6);
          if (res.code === '10001' && res.status === 'SUCCESS') {
            that.$message.success('删除角色成功');
            that.roleListRequest();
          } else {
            that.$message.error(res.msg);
          }
        }, () => {
          that.$message.error('网络错误，请稍候再试');
        });
      }).catch(() => {
        console.log(7);
        // this.$message({
        //   type: 'info',
        //   message: '取消输入'
        // });
      });
    },
    // 添加角色-提交按钮
    onSubmit () {
      var that = this;
      // 通过node获取
      var menuIdList = that.$refs.tree1.getCheckedNodes();
      console.log(menuIdList);
      console.log(9898);
      var permissionIdList = that.$refs.tree2.getCheckedNodes();
      var menuId = [];
      menuIdList.forEach(element => {
        console.log(element.id);
        menuId.push(element.id);
      });
      var permissionId = [];
      permissionIdList.forEach(element => {
        console.log(element.id);
        permissionId.push(element.id);
      });
      that.aMenuId = menuId.join();
      that.aPermissionId = permissionId.join();
      console.log(permissionId.join());
      console.log(that.aMenuId);
      console.log(55);
      console.log(that.aPermissionId);
      if (that.addRolesName === '') {
        that.$message.error('角色名称不能为空');
        return false;
      } else if (that.aMenuId === '') {
        that.$message.error('菜单id不能为空');
        return false;
      } else if (that.aPermissionId === '') {
        that.$message.error('权限id不能为空');
        return false;
      }
      that.fullscreenLoading1 = !that.fullscreenLoading1;
      // 添加角色接口请求
      http.post(api.RoleAdd, {
        token: that.token,
        name: that.addRolesName,
        slug: that.addRolesName,
        menu_id: that.aMenuId,
        permission_id: that.aPermissionId
      }, (res) => {
        console.log(res);
        console.log(33);
        that.fullscreenLoading1 = !that.fullscreenLoading1;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success('添加角色成功');
          // 清空
          that.roleListRequest();
          that.addRolesName = '';
          this.$refs.tree1.setCheckedKeys([]);
          this.$refs.tree2.setCheckedKeys([]);
        } else {
          that.$message.error(res.msg);
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.fullscreenLoading1 = !that.fullscreenLoading1;
      });
    },
    roleListRequest () {
      var that = this;
      that.loading = true;
      // 获取角色列表
      http.get(api.RoleList, {
        token: that.token
      }, (res) => {
        console.log(res);
        console.log(1);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.rolesList = res.data[0].list;
          that.loading = false;
        } else {
          that.$message.error(res.msg);
          that.loading = false;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.loading = false;
      });
    },
    getMenuList () {
      var that = this;
      // 获取菜单列表
      http.get(api.MenuList, {
        token: that.token
      }, (res) => {
        console.log(res);
        console.log(22);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.menuList = res.data;
        } else {
          that.$message.error(res.msg);
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
    },
    getRightList () {
      var that = this;
      // 获取权限列表
      http.get(api.PermissionList, {
        token: that.token
      }, (res) => {
        console.log(res);
        console.log(33);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.rightsList = res.data[0].list;
        } else {
          that.$message.error(res.msg);
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
    }
  },
  data: function () {
    return {
      token: localStorage.getItem('token'),
      fullscreenLoading1: false,
      loading: true,
      // 全选
      checkedMenu: false,
      checkedRight: false,
      // 添加角色-角色名
      addRolesName: '',
      // 角色列表
      rolesList: [],
      // 选中的菜单id
      aMenuId: '',
      // 选中的权限id
      aPermissionId: '',
      // 菜单列表
      menuList: [],
      // 菜单列表默认指的绑定字段
      defaultProps1: {
        children: 'next',
        label: 'title'
      },
      // 权限列表
      rightsList: [],
      // 权限列表默认指的绑定字段
      defaultProps2: {
        children: 'next',
        label: 'slug'
      }
    };
  },
  mounted: function () {
    var that = this;
    that.roleListRequest();
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem;
  padding-right: 200px;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;
  .form-item 
    display: inline-block;
    margin-right: 35px;

    label
      font-size: 14px;
      color: #333;
      width: 200px;
      display: inline-block;
    .form-input, .form-select 
      width: 200px;
  .line 
    height: 15px;
.server-item 
  width: 20px;
  height: 20px;
  margin: 5px;
.rights-border
  margin-bottom: 20px
  .rights-title
    width:100px
    font-size: 14px;
    color: #606266;
    line-height: 30px;
.center-distance
  opacity: 0
</style>
